{% load i18n %}
{% load compress %}

<div class="panel-group" id="plan-accordion">

{% for plan in plans %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" data-toggle="collapse" data-parent="#plan-accordion" href="#Plan-{{ plan.id }}">
        {{ plan.title }}
        </a>
        </h4>
    </div>
    <div id="Plan-{{ plan.id }}" class="panel-collapse collapse {% if forloop.first %} in {% endif %}">
        <div class="panel-body">

            <div class=" col-sm-6">
                <dl class="dl-horizontal">
                    <dt>{% trans "First time Cost"%}</dt><dd>{{ plan.registration_cost }} SC</dd>
                    <dt>{% trans "Renew Price"%}</dt><dd>{{ plan.renew_cost }} SC</dd>
                    <dt>{% trans "Cycle"%}</dt><dd>{{ plan.cycle }}{% trans "Days"%} </dd>
                    <dt>{% trans "limit per user"%}</dt><dd>{% if plan.user_unique == -1 %}None{% else %}{{ plan.user_unique }}{% endif %}</dd>
                    <dt>{% trans "Monthly Price"%}</dt><dd>{{ plan.Monthly }} SC/mon</dd>
                </dl>
            </div>

            <div class=" col-sm-6">
                <p><button type="button" class="btn btn-primary " data-toggle="modal" data-target="#confirm-plan-{{ plan.id }}" >{% trans "Subscription Now!"%}</button></p>
                <p> <span class="label label-success"> {% trans "In Stock"%} ({{ plan.overage }})</span></p>
                <p>{{ plan.body }}</p>
            </div>

        </div>
{#        <div class="panel-footer">#}
{#            Panel footer#}
{#        </div>#}
    </div>
</div>




<!-- Modal -->
<div class="modal fade" id="confirm-plan-{{ plan.id }}" tabindex="-1" role="dialog" aria-labelledby="confirm-plan-{{ plan.id }}Label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">{% trans "Confirm"%}   </h4>
            </div>
            <div class="modal-body">
                <h4>{{ plan.title }}<small class="text-right">#{{ plan.id }}</small></h4>
                <dl class="dl-horizontal">
                    <dt>{% trans "First time Cost"%}</dt><dd>{{ plan.registration_cost }} SC</dd>
                    <dt>{% trans "Renew Price"%}</dt><dd>{{ plan.renew_cost }} SC</dd>
                    <dt>{% trans "Cycle"%}</dt><dd>{{ plan.cycle }} Days</dd>
                    <dt>{% trans "limit per user"%}</dt><dd>{% if plan.user_unique == -1 %}None{% else %}{{ plan.user_unique }}{% endif %}</dd>
                    <dt>{% trans "Monthly Price"%}</dt><dd>{{ plan.Monthly }} SC/mon</dd>
                </dl>

            <hr>
            <h4>{% trans "TOS"%}</h4>
            <p>....</p>


            </div>
            <div class="modal-footer">
                <form method="post" action="{% url 'geek-vpn-sub-plan' %}" class="confirm-plan-form ajax-plan-form form-inline" role="form" id="confirm-plan-form-{{ plan.id }}">
                    {% csrf_token %}
                    <div class="form-group">
                        <label class="control-label">
                            <input type="checkbox" name="agree"> {% trans "I Agree"%}
                            <input type="hidden" name="plan" value="{{ plan.id }}">
                        </label>
                    </div>
                    <div class="form-group">
                        <label>
                            <button  class="btn btn-primary" >{% trans "Pay!"%} </button>
                        </label>
                    </div>
                    <div class="form-group">
                        <label>
                            <button type="button" class="btn btn-default btn-danger" data-dismiss="modal">{% trans "Close"%} </button>
                        </label>
                    </div>
                </form>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



{% endfor %}

</div>
{% compress js %}
<script type="text/javascript">

    //plan 认证

    $(document).ready(function(){

        $('.confirm-plan-form').validate(
        {
            rules: {
                agree : {
                    required : true
                }
            },
            errorPlacement: function(error,element) {
                return true;
              },

{#            errorElement: 'span',#}
{#            errorClass:'help-block',#}
            highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },

            success: function(element) {
            element

            .closest('.form-group').removeClass('has-error').addClass('has-success');
        }
        });
    }); // end document.ready


</script>

<script type="text/javascript">
    //  Ajax提交
    $(document).ready(function() {
        $('.ajax-plan-form').ajaxForm({
            dataType:  'json',
            success:    function(data) {
                if (data.status == true){
                    $('.modal').modal('hide');
                    setTimeout(function(){get_plan_content();get_subscription_content();}, 500);

                }
            }
        });
    });
</script>

{% endcompress %}